<template>
  <view class="page-section page-section-gap map-container">
    <map style="width: 100%; height: 100vh;" :layer-style='5' :style="{height:'100vh'}" :show-location='true'
         :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
         @callouttap='callouttap'>
    </map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: 23.106574, //纬度
      longitude: 113.324587,//经度
      scale: 16,//缩放级别
      marker: [
        {
          id: 6,
          latitude: 23.13065,//纬度
          longitude: 113.3274,//经度
          callout: {//自定义标记点上方的气泡窗口 点击有效
            content: '',//文本
            address:'',
            color: '#ffffff',//文字颜色
            padding:'10',
            fontSize: 14,//文本大小
            borderRadius: 15,//边框圆角
            borderWidth: '10',
            bgColor: '#4CB86CFF',//背景颜色
            display: 'ALWAYS',//常显
          },
        }
      ],
    }
  },
  onLoad(options) {
    this.marker = JSON.parse(options.ditudata)
    console.log('this.marker',this.marker)
    this.latitude = this.marker[0]['latitude']
    this.longitude = this.marker[0]['longitude']
  },
  computed: {
    mapheight() {
      return '90vh'
    },
    coverbottom() {
      let data = ''
      if (this.bottomData) {
        data = '20rpx'
      } else {
        data = '100rpx'
      }
      return data
    }
  },

  methods: {
    //地图点击事件
    markertap(e) {
      let id_index=e.detail.markerId;
      let loc = this.marker[id_index]
      this.openloc(parseFloat(loc.latitude),parseFloat(loc.longitude),loc.callout.content,loc.callout.address)
      console.log("===你点击了标记点===", loc)
    },
    //地图点击事件
    callouttap(e) {
      let id_index=e.detail.markerId;
      let loc = this.marker[id_index]
      this.openloc(parseFloat(loc.latitude),parseFloat(loc.longitude),loc.callout.content,loc.callout.address)
      console.log('地图点击事件',  loc)
    },

    openloc(latitude,longitude,name, address){
      uni.openLocation({
        name: name, address: address,
        latitude: latitude,
        longitude: longitude,
        success: function () {
          console.log('openLocation-success');
        }
      });
    }
  }
}
</script>
<style lang='less' scoped>
.map-container {
  position: relative;
  overflow: hidden;

  .cover-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    color: #484848;
    background-color: #fff;
    background-size: 120rpx 120rpx;
    background-position: center center;
    position: absolute;
    bottom: 100rpx;
    right: 32rpx;
  }

  .cover-image {
    display: inline-block;
    width: 30rpx;
    height: 30rpx;
  }
}
</style>
